<template>
  <div>
    <app-top></app-top>

    <app-type :selectType="selectType" :selectTypeId="selectTypeId"> </app-type>

    <div class="cond">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="商品名称">
          <el-input
            v-model="searchForm.prodName"
            placeholder="商品名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="最低价">
          <el-input
            v-model="searchForm.minPrice"
            type="num"
            placeholder="最低价"
          ></el-input>
        </el-form-item>

        <el-form-item label="最高价">
          <el-input
            v-model="searchForm.maxPrice"
            type="num"
            placeholder="最高价"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit()">查询</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <hr />

    <!-- 商品列表开始 -->
    <div>
      <app-shouji :prods="prodList"></app-shouji>
    </div>
    <!-- 商品列表结束 -->

    <div class="fenye">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page="searchForm.pageNum"
        :page-size="searchForm.pageSize"
        layout=" prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import AppTop from "@/components/home/AppTop.vue";
import AppType from "@/components/home/AppType.vue";

import { listProduct } from "@/api/product.js";
import AppShouji from "@/components/home/AppShouji2.vue";

export default {
  data() {
    return {
      searchForm: {
        pageNum: 1,
        pageSize:20,
        prodName: "",
        minPrice: null,
        maxPrice: null,
        prodType: null,
      },

      prodList: [],
      total: 0,

      selectTypeId: null,
    };
  },

  components: {
    AppTop,
    AppType,
    AppShouji,
  },

  created() {
    this.selectTypeId = this.$route.params.id;
    this.searchForm.prodType = this.$route.params.id;


    this.getList();
  },

  methods: {
    //重置安妮u
    resetForm() {
      this.searchForm = {
        pageNum: 1,
        pageSize: 20,
        prodName: "",
        minPrice: null,
        maxPrice: null,
        prodType: this.selectTypeId,
      };
      this.getList();
    },
    onSubmit() {
      this.searchForm.pageNum = 1;
      this.getList();
    },
    getList() {
      listProduct(this.searchForm).then((resp) => {
        this.prodList = resp.data.records;
        this.total = resp.data.total;
      });
    },

    selectType(typeId) {
      this.searchForm.prodType = typeId;
      this.searchForm.pageNum = 1;
      this.getList();
      //alert( this.searchForm.prodType)
    },

    //页码改变触发
    handleCurrentChange(ye) {
      this.searchForm.pageNum = ye;
      this.getList();
    },
  },
};
</script>

<style scoped>
.cond {
  width: 1226px;
  margin: auto;
  text-align: center;
}

.fenye {
  width: 1226px;
  margin: auto;
  text-align: center;
}
</style>